<template>
  <div class="app-container">
    <h3>Banner列表</h3>
    <!-- 表格 -->
    <el-table
      :data="list"
      border
      fit
      highlight-current-row>

      <el-table-column
        label="序号"
        width="70"
        align="center">
        <template slot-scope="scope">
          {{ (current - 1) * limit + scope.$index + 1 }}
        </template>
      </el-table-column>

      <el-table-column prop="title" label="标题"/>

      <el-table-column label="图片">
        <template slot-scope="scope">
          <div class="pic">
            <img :src="scope.row.imageUrl" alt="scope.row.title" width="150px">
          </div>
        </template>
      </el-table-column>

      <el-table-column prop="linkUrl" label="访问路径"/>

      <el-table-column prop="createTime" label="添加时间"/>

      <el-table-column label="操作" width="300" align="center">
        <template slot-scope="scope">
          <router-link :to="'/cms/banner/update/'+scope.row.id">
            <el-button type="primary" title="修改" size="mini" icon="el-icon-edit"
            ></el-button>
          </router-link>
          <el-button type="danger" title="删除" size="mini" icon="el-icon-delete" @click="removeDataById(scope.row.id)">
          </el-button>
        </template>
      </el-table-column>
    </el-table>
    <!-- 分页组件 -->
    <el-pagination
      :current-page="current"
      :total="total"
      :page-size="limit"
      :page-sizes="[5, 10, 20, 30, 40, 50, 100]"
      style="padding: 30px 0; text-align: center;"
      layout="sizes, prev, pager, next, jumper, ->, total, slot"
      @current-change="initBannerList"
      @size-change="changeLimit"
    />
  </div>
</template>

<script>
  import banner from "@/api/banner";

  export default {
    name: "banner",
    data() {
      return {
        list: [],//banner数据列表
        current: 1,//当前页
        limit: 5,//每页显示记录数
        total: 0,//总记录数
      }
    },
    created() {
      //初始化banner列表
      this.initBannerList()
    },
    methods: {
      // 当页码发生改变的时候
      changeLimit(limit) {
        console.log(limit)
        this.limit = limit
        this.initBannerList(1)
      },
      //初始化banner列表
      initBannerList(current = 1) {
        this.current = current
        banner.pageList(this.current, this.limit)
          .then(response => {
            this.list = response.data.bannerList
            this.total = response.data.total
          })
      },
      //删除
      removeDataById(id) {
        this.$confirm('此操作将永久删除该Banner, 是否继续?', '提示', {
          confirmButtonText: '确定',
          cancelButtonText: '取消',
          type: 'warning'
        }).then(() => {//点击确认调用
          banner.deleteBannerById(id)
            .then(response => {
              //提示
              this.$message({
                type: 'success',
                message: response.message
              })
              //刷新列表
              this.initBannerList(1)
            })
        })
          .catch(response => {
            //提示
            this.$message({
              type: 'error',
              message: response.message
            })
            //刷新列表
            this.initBannerList(1)
          })
          .catch(() => {
            this.$message({
              type: 'info',
              message: '已取消删除'
            });
          });
      }
    }
  }
</script>

<style scoped>

</style>
